<template>
  <view class="intro-container">
    <!-- 顶部区域 -->
    <view class="header">
      <view class="title-row">
        <text class="title">NTU介绍</text>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view scroll-y="true" class="content-area">
      <!-- 错误显示 -->
      <error-display 
        :show="showError" 
        :title="errorTitle" 
        :message="errorMessage" 
        @retry="loadPageData"
      />
      
      <!-- 加载中显示 -->
      <view class="loading-container" v-if="isLoading">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 正常内容 -->
      <view v-if="!showError && !isLoading && pageData">
        <!-- 动态渲染分类和项目 -->
        <view v-for="category in pageData.categories" :key="category.id" class="category-section">
          <!-- 分类标题 -->
          <view class="section-title">
            <text>{{ category.name }}</text>
          </view>
          
          <!-- 项目按钮 -->
          <view class="button-row" :class="{ 'multi': category.items.length > 6 }">
            <view 
              v-for="item in category.items" 
              :key="item.id"
              class="grid-button"
              :class="{ 'small': item.is_small }"
              @tap="navigateToItem(item)"
            >
              <view class="icon-container" :class="{ 'small': item.is_small }">
                <image 
                  class="icon-image" 
                  :src="item.icon" 
                  mode="aspectFit"
                  @error="onImageError"
                ></image>
              </view>
              <text class="button-text">{{ item.name }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import content from '@/common/api/content.js';
const pageAPI = content.page;
import ErrorDisplay from '@/components/ErrorDisplay.vue';
import { NavigationHelper } from '@/common/utils/navigation.js';
import { ErrorHandler } from '@/common/utils/errorHandler.js';

export default {
  components: {
    ErrorDisplay
  },
  
  data() {
    return {
      isLoading: true,
      showError: false,
      errorTitle: '加载失败',
      errorMessage: '无法连接到服务器，请检查网络连接',
      pageData: null
    }
  },
  
  onLoad() {
    // 加载页面数据
    this.loadPageData();
  },
  
  methods: {
    // 加载页面数据
    async loadPageData() {
      this.isLoading = true;
      this.showError = false;
      
      try {
        // 获取NTU介绍页面数据
        const response = await pageAPI.getPageData('ntu_intro');
        this.pageData = response.data;
        this.isLoading = false;
      } catch (error) {
        console.error('加载页面数据失败:', error);
        this.isLoading = false;
        this.showError = true;
        
        if (error.message) {
          this.errorTitle = '加载失败';
          this.errorMessage = error.message;
        } else {
          this.errorTitle = '连接失败';
          this.errorMessage = '无法连接到服务器，请检查后端服务是否正常运行';
        }
      }
    },
    
    // 处理项目导航 - 使用公共工具类
    async navigateToItem(item) {
      await NavigationHelper.navigateToItem(item);
    },
    
    // 处理错误 - 使用公共工具类
    handleError(error) {
      const errorInfo = ErrorHandler.handleApiError(error);
      this.errorTitle = errorInfo.errorTitle;
      this.errorMessage = errorInfo.errorMessage;
    },
    
    // 图片加载错误处理
    onImageError(e) {
      console.error('图片加载失败:', e);
      // 可以设置默认图片
      e.target.src = '/static/icons/helper.png';
    }
  }
}
</script>

<style>
.intro-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部区域样式 */
.header {
  display: flex;
  flex-direction: column;
  background-color: #1e3c72;
  color: #fff;
  position: relative;
  padding-top: calc(20rpx + 44px);
}

.title-row {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
}

.title {
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
}

/* 内容区域样式 */
.content-area {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

/* 分类区域样式 */
.category-section {
  margin-bottom: 40rpx;
}

/* 加载中样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 6rpx solid #f3f3f3;
  border-top: 6rpx solid #1e3c72;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #666;
}

/* 小标题样式 */
.section-title {
  margin: 20rpx 0 20rpx 0;
  padding: 0 20rpx;
}

.section-title text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.section-title text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 32rpx;
  background-color: #1e3c72;
  border-radius: 4rpx;
}

/* 按钮样式已移至公共样式文件 button-common.wxss */
</style>